<template>
  <div class="wrap">
    <p class="message">消息</p>
    <div class="bot">
      <van-cell is-link v-for="(item,index) in message" :key="index" @click="showPopup">
        <van-icon name="bell" dot class="name" size="30"/>
        <span>{{item.title}}</span>
        <p class="time">{{item.sendDate}}</p>
      </van-cell>
    </div>
    <div class="nr" v-if="data.a==1">
      <span style="margin-left:21rem;" @click="data.a=0">X</span>
      <p class="title">你看过的纽北圈速更新了</p>
      <span class="text">
        <p>不过从2013年保时捷918诞生开始， 
          大家不仅对于Hypercar有了全新的认识，
           纽北的圈速纪录也因的诞生而被不断地刷新。
           法拉利“法拉利”，只有918在纽北创造了圈速，
           占据量产车圈速第一的头衔好几年
           迈凯轮一直没有正式在纽北创造圈速，
           而法拉利直接说“我们从不刷纽北圈速”。
           </p>
      </span>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed, reactive, ref } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "Home",
  setup(props, context) {
    //初始值
    let data = reactive({
      message: [],
      show: false,
      a: 0
    });
    let store = useStore();
    //home数据
    store.dispatch("message/getMessage", { mid: 0, pageNo: 1 });
    function showPopup(params) {
      console.log(1);
      data.a = 1;
    }
    return {
      message: computed(() => store.state.message.message),
      showPopup,
      data
    };
  }
});
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
}
.message {
  width: 100%;
  height: 3rem;
  text-align: center;
  line-height: 3rem;
  border-bottom: 1px solid #eee;
}
.bot {
  width: 100%;
  height: 100%;
}
.van-cell {
  width: 100%;
}
.name {
  top: 0.266667rem;
  left: 0.2rem;
}
.van-cell__value--alone {
  width: 100%;
}
.time {
  margin-left: 2.85rem;
}
.van-cell__left-icon,
.van-cell__right-icon {
  height: 0.533333rem;
  font-size: 0.213333rem;
  line-height: 0.533333rem;
}
span {
  position: relative;
  left: 0.666667rem;
}
.nr {
  width: 100%;
  height: 15rem;
  background: #ccc;
  position: fixed;

  bottom: 3.2rem;
  .title {
    margin-left: 1rem;
    color: red;
    font-size: 1.5rem;
  }
  .text {
    margin: 0;
    padding: 0;
    p{
      margin-top: 1rem;
    }
    text-indent: 2rem;
    // color: black;
      color: red;
  }
}
</style>